<!--
 * @Description: 自定义表单使用
 * @Version: 0.0.1
 * @Autor: zhj1214
 * @Date: 2020-08-27 09:28:06
 * @LastEditors: zhj1214
 * @LastEditTime: 2022-09-14 14:09:13
-->
<template>
  <div class="view">
    <div style="font-size: 38px; padding: 40px">动态表单 演示</div>
    <zhjform
      :ref="formData.formType"
      class="customView"
      :formData="formData"
      :customStyle="parnetStyle"
      @modelChange="modelChange"
    >
      <template v-slot:customLabel>
        <div style="display: flex">
          <div>自定义插槽：</div>
          <i-input
            style="flex: 1"
            v-model="customText"
            placeholder="我是自定义插槽"
            @on-blur.stop="customClick('customLabel')"
          >
          </i-input>
        </div>
      </template>

      <i-Button type="primary" @click="handleSubmit(formData.formType)"
        >提交</i-Button
      >
    </zhjform>
  </div>
</template>

<script>
import zhjform from "../lib/index.vue";

export default {
  components: {
    zhjform,
  },
  data() {
    return {
      formData: {
        formType: "formTypeBase", // form的ref，也代表模板类型
        componentsList: [
          {
            type: "formInput",
            data: {
              componentTemplateType: "base", // 备用值，代表封装了几种输入框样式
              model: "", // 当前组件的v-model
              componentsStyle: {
                "min-width": "280px",
              },
            },
            function: {
              "on-change": (val) => {
                console.log("正在输入", val);
              },
            },
            // 当前组件校验规则
            rules: [
              {
                required: true,
                message: "Please fill in the user name",
                trigger: "blur",
              },
              {
                type: "string",
                min: 6,
                message: "The user length cannot be less than 6 bits",
                trigger: "blur",
              },
            ],
            componentsProps: {
              type: "textarea", // 组件类型
              placeholder: "请输入你的姓名111",
              clearable: false,
              "show-word-limit": true,
              maxlength: 42,
            },
          },
          {
            slotType: "customLabel",
            // 当前组件校验规则
            rules: [
              {
                type: "string",
                min: 6,
                message: "最小长度6个字符",
                trigger: "change",
              },
            ],
          },
          {
            type: "formRadio",
            data: {
              // componentTemplateType: "Radio",
              componentTemplateType: "RadioGroup",
              listRadio: [
                {
                  label: "男",
                  value: "man",
                },
                {
                  label: "女",
                  value: "wman",
                },
              ],
              componentsStyle: {
                "min-width": "280px",
              },
            },
            componentsProps: {},
          },

          {
            type: "formSelect",
            data: {
              componentTemplateType: "base", // 模板类型
              componentsStyle: {
                "margin-top": "20px",
                "min-width": "280px",
              },
              prefix:
                "https://dev-file.iviewui.com/userinfoPDvn9gKWYihR24SpgC319vXY8qniCqj4/avatar",
              model: "",
              selectList: [
                {
                  value: "0",
                  label: "香蕉",
                },
                {
                  value: "1",
                  disabled: true,
                  label: "苹果",
                },
                {
                  value: "2",
                  label: "桃子",
                },
                {
                  value: "3",
                  label: "葡萄",
                },
                {
                  value: "4",
                  label: "芒果",
                },
                {
                  value: "5",
                  label: "榴莲",
                },
              ],
            },
            rules: [
              {
                required: true,
                message: "请选择水果.",
                trigger: "change",
              },
            ],
            function: {
              "on-change": (val) => {
                console.log("当前选择了", val);
              },
            },
            componentsProps: {
              placeholder: "请选择你喜欢的水果",
              filterable: true,

              disabled: false,
              multiple: true,
            },
          },

          {
            type: "formDatePicker",
            data: {
              model: "", // 当前组件的v-model
              componentsStyle: {
                "min-width": "280px",
              },
            },
            function: {
              "on-change": (a, b) => {
                console.log(b, "选择的日期", a, this);
              },
            },
            // 当前组件校验规则
            rules: [
              {
                required: true,
                message: "请选择时间11",
                trigger: "change",
              },
            ],
            componentsProps: {
              type: "date", // 组件类型
              placeholder: "请选择日期",
            },
          },
          {
            type: "formCheckbox",
            data: {
              // componentTemplateType: "Radio",
              componentTemplateType: "RadioGroup",
              listRadio: [
                {
                  label: "男",
                  value: "man",
                },
                {
                  label: "女",
                  value: "wman",
                },
              ],
              componentsStyle: {
                "min-width": "280px",
              },
            },
            componentsProps: {},
          },
          {
            type: "formTimePicker",
            data: {
              model: "", // 当前组件的v-model
              componentsStyle: {
                "min-width": "280px",
              },
            },
            function: {
              "on-change": (val) => {
                console.log("选择的 时间", val);
              },
            },
            componentsProps: {
              type: "timerange", // 组件类型
              placeholder: "请选择时间",
            },
          },
          {
            type: "formNumber",
            data: {
              model: 0, // 当前组件的v-model
              componentsStyle: {
                "min-width": "280px",
              },
            },
            function: {
              "on-change": (val) => {
                console.log("选择的 时间", val);
              },
            },
            componentsProps: {
              max: 100,
              step: 1.5,
              min: 1,
            },
          },
        ],
      },

      parnetStyle: {
        border: "1px solid #f5f5f5",
        padding: "50px",
      },
      name: "form",
      customText: "",
    };
  },
  methods: {
    /**
     * @description: 描述
     * @param {*} name 表单ref，用于获取自定义组件实例
     * @author: zhj1214
     */
    handleSubmit(name) {
      console.log(name, "校验ref", this.$refs[name]);
      if (this.$refs[name] && this.$refs[name].$children[0]) {
        this.$refs[name].$children[0].validate((valid) => {
          if (valid) {
            this.$Message.success("Success!");
          } else {
            this.$Message.error("Fail!");
          }
        });
      }
    },
    /**
     * @description: form 中model发生改变会被触发
     * @param {*}
     * @author: zhj1214
     */
    modelChange(val) {
      console.log(this.formData,"表单的值改变了", val);
    },
    /**
     * @description: 自定义插槽使用
     * @param {*} val formData中定义的 slotType
     * @author: zhj1214
     */

    customClick(val) {
      let obj = {};
      obj[`${val}Model`] = this.customText;
      if (this.$refs[this.formData.formType]) {
        this.$refs[this.formData.formType].modelWatch(obj);
      }
    },
  },
};
</script>

<style  scoped>
.view {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.customView {
  width: 50vw;
}
</style>